<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Manual load with start time</title>

    <script src="../../dist/modern/umd/dash.all.debug.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/main.css" rel="stylesheet">

    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>

    <script class="code">
        function init() {
            var video,
                player,
                url = "https://livesim2.dashif.org/livesim2/testpic_2s/Manifest.mpd";

            player = dashjs.MediaPlayer().create();
            video = document.querySelector("video");
            player.initialize(); /* initialize the MediaPlayer instance */

            player.updateSettings({
                debug: {
                    logLevel: 4
                }
            });
            const starttime = new Date().getTime() / 1000 - 60;
            player.attachView(video); /* tell the player which videoElement it should use */
            player.attachSource(url, `posix:${starttime}`); /* start from UTC time */
            /* player.attachSource(url, starttime);  start relative to AST */
        }
    </script>
</head>
<body>

<main>
    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <img class=""
                 src="../lib/img/dashjs-logo.png"
                 width="200">
        </header>
        <div class="row">
            <div class="col-md-4">
                <div class="h-100 p-5 bg-light border rounded-3">
                    <h3>Manual load with start time</h3>
                    <p>A sample showing how to initialize playback at a specific start time.
                    <ul>
                        <li>For VoD content the start time is relative to the start time of the first period.</li>
                        <li>For live content
                            <ul>
                                <li>If the parameter starts from prefix
                                    posix: it signifies the absolute time range defined in seconds of Coordinated
                                    Universal Time
                                    (ITU-R TF.460-6). This is the number of seconds since 01-01-1970 00:00:00 UTC.
                                    Fractions of
                                    seconds may be optionally specified down to the millisecond level.
                                </li>
                                <li>If no posix prefix is used the starttime is relative to MPD@availabilityStartTime</li>
                            </ul>
                        </li>
                    </ul>
                    </p>
                    <p>In this example playback starts 60 seconds from the current wall clock time.
                    </p>
                </div>
            </div>
            <div class="col-md-8">
                <video controls="true"></video>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="code-output"></div>
            </div>
        </div>
        <footer class="pt-3 mt-4 text-muted border-top">
            &copy; DASH-IF
        </footer>
    </div>
</main>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        init();
    });
</script>
<script src="../highlighter.js"></script>
</body>
</html>
